<template>
  <div style="height: 100%;">
    <div class="title">
      <div></div>
      <div class="footer">{{ form.danweiname }} {{ form.dateType == '1' ? form.value1 : form.dateType == '2' ? form.value2 : form.value3 }}
        {{ isshow=='elec'?'电量':'负荷' }}流向图
      </div>
      <div class="danwei">单位:  {{ isshow=='elec'?'kWh':'kW' }}</div>
    </div>
    <div v-show="isshow=='elec'" class="eleimage" ref="eleimage"></div>
    <div v-show="isshow=='load'" class="eleimage" ref="elesangji"></div>
    
  </div>
</template>

<script>
import {GetEcharts} from '@/utils/echarts'
import * as echarts from 'echarts';
import { getelectlistapi } from '@/api/energy-consumption/Basic-information/FlowDirection'
import {ColorList,convertChildrenListToChildren,shuffleArray} from '@/utils/array'
export default {
  name: 'CallPoliceElecimage',
  props: {
    form: {
      type:Object
    },
    companyId: {
      // type:String
    }
  },
  data() {
    return {
      isshow: 'elec',
    };
  },

  mounted() {
    this.chartBox = this.$refs.elesangji
    // this.chartBox.style.maxHeight = this.chartBox.clientHeight + 'px'
  },

  methods: {
    // 获取树图
    async getelecechart() {
      const obj=this.form
      const {data:{entity}} = await getelectlistapi({
        companyId: this.companyId, dateType: obj.dateType, type: '1',
        dateString: obj.dateType == '1' ? obj.value1 : obj.dateType == '2' ? obj.value2 : obj.value3,
      })
      let convertedData = convertChildrenListToChildren(entity,ColorList);
      const data=[convertedData]
      let option = {
          tooltip : {
              show: true,
              trigger: 'item',
              formatter: "{b}: {c}",
              backgroundColor:'rgba(250, 250, 250, 0.1)'
          },
          series: {
              top: '1%',
              left: '10%',
              bottom: '1%',
              right: '10%',
              type: 'tree',
              data: data,
              initialTreeDepth: 3,
              roam:true,
			        symbolKeepAspect:true,
              lineStyle: {
                  color: '#d4a4eb' // 设置线条颜色为红色
              },
              emphasis: {
                  focus: 'ancestor',
              },
              label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 14,
                  formatter: function (params) {
                    var label =   params.name +'  ' + params.value ;
                      return label;
                  }
              },
              leaves: {
                  label: {
                      position: 'right',
                      verticalAlign: 'middle',
                      align: 'left',
                  },
              },
          },
      };
      GetEcharts(this,this.$refs.eleimage,option)
    },
    // 获取桑基图#FDAC41
    async getshangjiechart() {
      const obj=this.form
      const {data:{entity}} = await getelectlistapi({
        companyId: this.companyId, dateType: obj.dateType, type: '2',
        dateString: obj.dateType == '1' ? obj.value1 : obj.dateType == '2' ? obj.value2 : obj.value3,
      })
      let convertedData = convertChildrenListToChildren(entity,ColorList);
      const data=[convertedData]
      let option = {
          tooltip : {
              show: true,
              trigger: 'item',
              formatter: "{b}: {c}",
              backgroundColor:'rgba(250, 250, 250, 0.1)'
          },
          series: {
              top: '1%',
              left: '10%',
              bottom: '1%',
              right: '10%',
              type: 'tree',
              data: data,
              initialTreeDepth: 3,
              roam:true,
			        symbolKeepAspect:true,
              lineStyle: {
                  color: '#FDAC41' // 设置线条颜色为红色
              },
              emphasis: {
                  focus: 'ancestor',
              },
              label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 14,
                  formatter: function (params) {
                    var label =   params.name + '  ' + params.value ;
                      return label;
                  }
              },
              leaves: {
                  label: {
                      position: 'right',
                      verticalAlign: 'middle',
                      align: 'left',
                  },
              },
          },
      };
      GetEcharts(this,this.$refs.elesangji,option)
    },
    convertDataToSankeyFormat(entity) {
    let nodes = [];
    let links = [];
    function traverse(node, parentName) {
        let nodeData = {
            name: node.name,
        };
        nodes.push(nodeData);
        if (parentName) {
            links.push({ source: parentName, target: nodeData.name,value:node.value });
        }
        if (node.childrenList) {
            for (let child of node.childrenList) {
                traverse(child, node.name);
            }
        }
    }
    traverse(entity, null);
    return {  nodes, links: links };
},
    shuffleColorArray(colorArray) {
     return colorArray.sort(() => Math.random() - 0.5);
    }
  },
};
</script>

<style scoped>
/* .danwei{
  text-align: right;
} */
 .title{
  display: flex;
  justify-content: space-between;
 }
.eleimage{
  height: 92%;
}
/* .footer{
  text-align: center;
} */
</style>